<template>
  <div class="paytype-page mx-auto max-w-7xl">
    <div class="box-center flexbox">
      <div class="left">
        <div class="mode">
          <div class="title flexbox flex-align-center capitalize">
            <h1 class="text">{{ $t('bottomCommon.payTypeTitle') }}</h1>
          </div>
        </div>
        <div class="item-lable">{{ $t('formItem.chooseCurrency') }}</div>
        <div class="item-currency">
          <div class="currency flexbox flex-align-center">
            <el-select
              class="input"
              filterable
              v-model="userSelectInfo.currency_code"
              :placeholder="$t('formPlaceholder.select')"
              @change="currencyChange"
            >
              <template slot="prefix">
                <img
                  loading="lazy"
                  class="icon"
                  src="https://cd.sealmg.com/assets/img/set-plane-currency.png"
                  alt="Currency selector icon"
                  title="Select currency"
                  srcset=""
                />
              </template>
              <el-option v-for="(item, index) in currencyList" :key="index" :label="item.currency_name" :value="item.currency_code"> </el-option>
            </el-select>
          </div>
        </div>
        <div class="item-lable">{{ $t('bottomCommon.payTypeText') }}</div>
        <div class="list lg:grid-cols-2 grid grid-cols-1 gap-4">
          <div class="item flexbox flex-align-center" v-for="(item, index) in paytype" :key="index">
            <div class="img">
              <img class="icon" v-lazy="$globalFn.imgPrefixUrl(item.pay_icon)" loading="lazy" :title="item.pay_name" :alt="item.pay_name" />
            </div>
            <span class="name capitalize">{{ item.pay_name }}</span>
          </div>
        </div>
      </div>
      <div class="right h-fit sticky top-[6rem]">
        <div class="mode">
          <div class="title flexbox flex-align-center">
            <span class="text capitalize">{{ $t('formItem.chooseCurrency') }}</span>
          </div>
        </div>
        <div class="form">
          <div class="item">
            <div class="label">{{ $t('formItem.currency') }}</div>
            <div class="cont flexbox flex-align-center">
              <el-select
                class="input"
                filterable
                v-model="userSelectInfo.currency_code"
                :placeholder="$t('formPlaceholder.select')"
                @change="currencyChange"
              >
                <template slot="prefix">
                  <img
                    loading="lazy"
                    class="icon"
                    src="https://cd.sealmg.com/assets/img/set-plane-currency.png"
                    alt="Currency selector icon"
                    title="Select currency"
                    srcset=""
                  />
                </template>
                <el-option v-for="(item, index) in currencyList" :key="index" :label="item.currency_name" :value="item.currency_code"> </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'paytype',
    head: {
      title: 'Payment Methods - SEALMG',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content:
            'Explore our secure payment methods at SEALMG. We offer multiple payment options including credit cards, digital wallets and bank transfers for your convenience.'
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: 'payment methods, SEALMG payments, secure payments, online payment options'
        }
      ]
    },
    data() {
      return {
        paytype: [], // 支付方式列表
        userSelectInfo: {} // 用户选择的信息,包含货币代码等
      }
    },
    computed: {
      currencyList() {
        // 使用可选链操作符简化空值检查
        const currencies = this.$store?.state?.initData?.currencies
        if (!currencies) {
          return []
        }
        // 直接返回currencies的值数组,避免不必要的深拷贝
        return Object.values(currencies)
      }
    },
    created() {
      // this.userSelectInfo = this.$cookies.get("userSelect") || {};
      // this.getPaytype();
    },
    async asyncData({ app, $cookies }) {
      try {
        // 从cookie获取用户选择信息,使用解构赋值简化
        const userSelectInfo = $cookies.get('userSelect') || {
          country_icon: '/flag/United%20States.png',
          country_code: 'US',
          currency_code: 'USD',
          language_code: this.$i18n.locale
        }
        const { currency_code = '' } = userSelectInfo
        // 使用模板字符串构建URL,添加错误处理
        const res = await app.$axios.get(`/api/index/getPaymentList`, {
          params: {
            currency_code
          }
        })
        return {
          paytype: res,
          userSelectInfo
        }
      } catch (error) {
        // 错误处理,返回默认值
        console.error('获取支付方式列表失败:', error)
        return {
          paytype: [],
          userSelectInfo: {}
        }
      }
    },
    methods: {
      // 获取支付方式列表
      async getPaytype() {
        try {
          const { currency_code = '' } = this.userSelectInfo
          const res = await this.$axios.get('/api/index/getPaymentList', {
            params: { currency_code }
          })
          this.paytype = res
        } catch (error) {
          console.error('获取支付方式列表失败:', error)
          this.paytype = []
        }
      },
      // 货币切换处理
      async currencyChange() {
        await this.getPaytype()
        // 更新cookie中的用户选择
        this.$cookies.set('userSelect', this.userSelectInfo)
      }
    }
  }
</script>
<style lang="less" scoped>
  .paytype-page {
    .box-center {
      .mode {
        box-sizing: border-box;
        padding: 20px 24px 11px 24px;
        .title {
          padding-bottom: 8px;
          border-bottom: @border-1-e5;
          .text {
            font-weight: 500;
            font-size: 22px;
            color: @font-color-14;
          }
        }
      }
      .left {
        box-sizing: border-box;
        width: 793px;
        .mode {
          padding: 20px 0px 11px 0px;
        }
        .item-lable {
          display: none;
        }
        .item-currency {
          display: none;
        }
        .list {
          margin-top: 8px;
          margin-bottom: 12px;
          padding: 0px;
          // min-height: 140px;
          .item {
            box-sizing: border-box;
            padding: 0 20px;
            // width: 386px;
            // margin-left: 20px;
            // margin-bottom: 20px;
            height: 80px;
            background: @color-f7;
            border-radius: 12px;
            .img {
              width: 96px;
              height: 32px;
              .icon {
                padding: 1px 6px;
                width: 100%;
                height: 100%;
                overflow: clip;
                box-sizing: border-box;
                object-fit: contain;
                aspect-ratio: 1 / 1;
              }
            }
            .name {
              margin-left: 16px;
              font-weight: 500;
              font-size: 14px;
              color: @font-color-26;
            }
          }
          .item:nth-child(2n + 1) {
            margin-left: 0px;
          }
        }
      }
      .right {
        display: block;
        box-sizing: border-box;
        flex: 1;
        margin-left: 20px;
        .mode {
          width: 100%;
        }
        .form {
          margin-top: 8px;
          padding: 0 24px;
          background: @color-ff;
          .label {
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 12px;
            color: @font-color-99;
          }
          .cont {
            height: 48px;
            background: @color-f7;
            border-radius: 8px;
            .icon {
              width: 24px;
              height: 24px;
              margin-top: 8px;
            }
            .input {
              flex: 1;
            }
            /deep/.el-input__inner {
              padding-left: 48px;
              height: 48px;
              line-height: 48px;
            }
            /deep/.el-input__prefix {
              left: 16px;
              .icon {
                margin-top: 12px;
              }
            }
          }
        }
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .paytype-page {
      .box-center {
        display: block;
        .mode {
          box-sizing: border-box;
          width: 100%;
          padding: 16px 16px 7px 16px;
          margin-bottom: 8px;
          .title {
            padding-bottom: 8px;
            border-bottom: @border-1-e5;
            .text {
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
          }
        }
        .left {
          box-sizing: border-box;
          width: 100%;
          .mode {
            padding: 0 16px;
            .title {
              padding: 16px 0px 7px 0px;
            }
          }
          .item-lable {
            display: block;
            padding: 0 16px;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 12px;
            color: @font-color-66;
          }
          .item-currency {
            display: block;
            padding: 0 16px;
          }
          .currency {
            margin-bottom: 20px;
            height: 48px;
            background: @color-f7;
            border-radius: 8px;
            .icon {
              width: 24px;
              height: 24px;
              margin-top: 8px;
            }
            .input {
              flex: 1;
            }
            /deep/.el-input__inner {
              padding-left: 48px;
              height: 48px;
              line-height: 48px;
            }
            /deep/.el-input__prefix {
              left: 16px;
              .icon {
                margin-top: 12px;
              }
            }
          }
          .list {
            margin-bottom: 16px;
            padding: 0 16px;
            margin-top: 0px;
            min-height: auto;
            // max-height: 300px;
            // overflow-y: auto;
            .item {
              padding: 0 16px;
              height: 56px;
              margin-left: 0px;
              // margin-bottom: 16px;
              background: @color-f7;
              border-radius: 8px;
              .img {
                width: 60px;
                height: 24px;
                .icon {
                  padding: 4px 6px;
                  width: 100%;
                  height: 100%;
                  overflow: clip;
                  box-sizing: border-box;
                  object-fit: contain;
                  aspect-ratio: 1 / 1;
                }
              }
              .name {
                margin-left: 16px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
            }
          }
        }
        .right {
          display: none;
          box-sizing: border-box;
          flex: 1;
          .mode {
            width: 100%;
          }
          .form {
            margin-top: 8px;
            padding: 0 24px;
            background: @color-ff;
            .label {
              margin-bottom: 8px;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .paytype-page {
      .box-center {
        display: block;
        .mode {
          box-sizing: border-box;
          width: 100%;
          padding: 16px 16px 7px 16px;
          margin-bottom: 8px;
          .title {
            padding-bottom: 8px;
            border-bottom: @border-1-e5;
            .text {
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
          }
        }
        .left {
          box-sizing: border-box;
          width: 100%;
          .mode {
            padding: 0 16px;
            .title {
              padding: 16px 0px 7px 0px;
            }
          }
          .item-lable {
            display: block;
            padding: 0 16px;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 12px;
            color: @font-color-66;
          }
          .item-currency {
            display: block;
            padding: 0 16px;
          }
          .currency {
            margin-bottom: 20px;
            height: 48px;
            background: @color-f7;
            border-radius: 8px;
            .icon {
              width: 24px;
              height: 24px;
              margin-top: 8px;
            }
            .input {
              flex: 1;
            }
            /deep/.el-input__inner {
              padding-left: 48px;
              height: 48px;
              line-height: 48px;
            }
            /deep/.el-input__prefix {
              left: 16px;
              .icon {
                margin-top: 12px;
              }
            }
          }
          .list {
            margin-bottom: 16px;
            padding: 0 16px;
            margin-top: 0px;
            min-height: auto;
            // max-height: 300px;
            // overflow-y: auto;
            .item {
              padding: 0 16px;
              height: 56px;
              margin-left: 0px;
              // margin-bottom: 16px;
              background: @color-f7;
              border-radius: 8px;
              .img {
                width: 60px;
                height: 24px;
                .icon {
                  padding: 4px 6px;
                  width: 100%;
                  height: 100%;
                  overflow: clip;
                  box-sizing: border-box;
                  object-fit: contain;
                  aspect-ratio: 1 / 1;
                }
              }
              .name {
                margin-left: 16px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
            }
          }
        }
        .right {
          display: none;
          box-sizing: border-box;
          flex: 1;
          .mode {
            width: 100%;
          }
          .form {
            margin-top: 8px;
            padding: 0 24px;
            background: @color-ff;
            .label {
              margin-bottom: 8px;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
            }
          }
        }
      }
    }
  }
</style>
